import { Outlet ,useNavigate,useLocation} from 'react-router-dom'
import { Layout, Menu, theme } from 'antd';
import {
    UserOutlined, VideoCameraOutlined, UploadOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
} from '@ant-design/icons'
import './css/layout.css'
import React, { useState,useEffect } from 'react';
function LayoutPage() {

    const { Header, Sider, Content } = Layout;
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const menuItems = [
        {
            key: '/home',
            icon: <UserOutlined />,
            label: 'home',
        },
        {
            key: '/watermark',
            icon: <VideoCameraOutlined />,
            label: 'watermark',
        },
        {
            key: '/tag',
            icon: <UploadOutlined />,
            label: 'tag',
        },
    ]
    const navigate=useNavigate();
    const {pathname}=useLocation();
    const [defaultSelectedKeys,setDefaultSelectedKeys]=useState([pathname]);
    useEffect(()=>{
       setDefaultSelectedKeys([pathname])
    },[pathname])
   
    const clickMenu=({key}:{key:string})=>{
       navigate(key)
    }

    return (
        <>
            <Layout >
                <Sider className='sider' trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo" />
                    <Menu
                       onClick={clickMenu}
                        theme="dark"
                        mode="inline"
                        selectedKeys={defaultSelectedKeys}
                        items={ menuItems}
                    />
                </Sider>
                <Layout className="site-layout">
                    <Header style={{ padding: 0, background: colorBgContainer }}>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: () => setCollapsed(!collapsed),
                        })}
                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>

        </>
    )
}


export default LayoutPage